<template>
  <div v-show="isAdd">
    <case-adder
      @closeAdder="closeCaseAdder"
      @add-case="addCase"
      roy="java"
      job="老师"
    ></case-adder>
  </div>

  <case-table
    :caseList="caseList"
    @caseTableChange="changeCase"
    @caseTableDelete="deleteCase"
    @openAdder="openCaseAdder"
  ></case-table>

  <!-- <div v-show="isCounter">
    <slot-counter @closeCounter="closeTimer" :counterName="compName">
      <template #guest>
        <i>打工人</i>
      </template> -->

  <!-- <template #position="posTimes"> -->
  <!-- <template #position="{ times }">
        <strong>{{ compName }}</strong>
        <Times :times="times"></Times>
        <button @click="counterTimes = times">点我赋值</button>
      </template>
    </slot-counter>
  </div>
  <button v-show="!isCounter" @click="isCounter = true">点我打开计数器</button>
  <div>子组件外部的次数：{{ counterTimes }}</div> -->
</template>

<script lang="ts" setup>
import { ref, onUpdated, provide, type Ref } from "vue";
// import type { Ref } from "vue";
import CaseAdder from "./case/CaseAdder.vue";
import CaseTable from "./case/CaseTable.vue";
import type { SunnyCase, caseShow } from "@/types/sunnyCase/types";
onUpdated(() => {
  console.log("Main组件更新了↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑");
});
// import MyCounter from "@/components/countersLearn/MyCounter.vue";
// import Times from "./countersLearn/Times.vue";
// import SlotCounter from "./countersLearn/SlotCounter.vue";
// let compName = ref("主界面");

//isAdd用于控制是否显示新增组件。
let isAdd = ref(false);
// let counterTimes = ref(0);
// //控制关闭或者打开counter的属性
// let isCounter = ref(false);

// function closeTimer() {
//   isCounter.value = false;
// }

//用于和模板中的拥有对应ref属性的元素进行绑定。
// const caseFormRef = ref(null);

let caseList = ref<SunnyCase[]>([
  {
    id: 1,
    caseName: "接口测试",
    stepName: "请求登录",
    keywords: "post",
    param1: "name",
    param2: "password",
  },
  {
    id: 2,
    caseName: "接口测试",
    stepName: "请求登录",
    keywords: "post",
    param1: "name",
    param2: "password",
  },
  {
    id: 3,
    caseName: "接口测试",
    stepName: "请求登录",
    keywords: "post",
    param1: "name",
    param2: "password",
  },
  {
    id: 4,
    caseName: "接口测试",
    stepName: "请求登录",
    keywords: "post",
    param1: "name",
    param2: "password",
  },
  {
    id: 5,
    caseName: "接口测试",
    stepName: "请求登录",
    keywords: "post",
    param1: "name",
    param2: "password",
  },
  {
    id: 6,
    caseName: "接口测试",
    stepName: "请求登录",
    keywords: "post",
    param1: "name",
    param2: "password",
  },
]);

//提供依赖。
provide("changeCase", changeCase);
provide("roy", "肉老师");

function deleteCase(mycase: SunnyCase) {
  console.log("要删除的用例是：", mycase);
  caseList.value.splice(caseList.value.indexOf(mycase), 1);
  console.log("触发删除操作的对象是", event!.target);

  // caseList.value= caseList.value.filter((element)=>{
  //   return element.id!==mycase.id;
  // })
}

function addCase(newCase: caseShow) {
  let lastId = caseList.value[caseList.value.length - 1].id;
  console.log(lastId);
  //扩展操作符赋值，深拷贝
  let addCase: SunnyCase = { ...newCase, id: 0 };
  //如果直接push newCase是浅拷贝，会导致每次添加的元素都一起变化
  addCase.id = lastId + 1;
  caseList.value.push(addCase);
  isAdd.value = false;
}

//修改用例的实际回调函数。
function changeCase(caseId:number, caseKey:string, caseValue:string) {
  console.log("这是Main组件中的changeCase方法");
  // caseList.value = caseList.value.map((originCase) => {
  //   if (originCase.id === caseId) {
  //     let newCase = { ...originCase };
  //     newCase[caseKey] = caseValue;
  //     return newCase;
  //   } else {
  //     return originCase;
  //   }
  // });
  caseList.value.forEach((originCase) => {
    if (originCase.id === caseId) {
      originCase[caseKey] = caseValue;
    }
  });
}

//用于关闭Adder组件
function closeCaseAdder() {
  isAdd.value = false;
}

function openCaseAdder() {
  isAdd.value = true;
}
</script>

<style lang="scss" scoped></style>
